<template>
  <div id="Acc-water">

  </div>
</template>

<script lang="ts">
export default {
  mounted() {
    this.echarts()
  },
  methods: {
    echarts() {
      let myChart = this.$echarts.init(document.getElementById('Acc-water'))
      myChart.setOption({
        title: {
          text: '各工序排放情况',
          textStyle: {
            color: 'white'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let tar;
            if (params[1] && params[1].value !== '-') {
              tar = params[1];
            } else {
              tar = params[2];
            }
            return tar && tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
          }
        },
        legend: {
          data: ['排放', '循环利用'],
          x: 'right',
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['入料', '能耗', '能源产出', '产物', '总排放']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Placeholder',
            type: 'bar',
            stack: 'Total',
            silent: true,
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent'
            },
            emphasis: {
              itemStyle: {
                borderColor: 'transparent',
                color: 'transparent'
              }
            },
            data: [0, 60, 50, 50, 65, 0]
          },
          {
            name: '排放',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            data: [60, 10, '-', 15]
          },
          {
            name: '循环利用',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: 'bottom'
            },
            data: ['-', '-', 20, '-', '-']
          }
        ]
      });
    }
  },
}
</script>

<style scoped>
#echartsID {
  width: 90%;
  height: 80%;
}
</style>
